<template>
  <div>
    <div id='printBox'>
      <p class="title">财宝管理系统预览单</p>
      <ul class="detail">
      <!--  <li>单号：<span>JZ1231961315623</span></li>-->
        <li>桌号：<span>{{deskDetails.tableName}}</span></li>
        <li>开桌：<span>{{deskDetails.openStartTime}}</span></li>
        <li>时常：<span>{{deskDetails.openTime}}</span></li>
        <li>计费规则：<span>{{deskDetails.costName}}</span></li>
      </ul>
      <div class="thead">
        <p>消费项目</p>
        <p class="center">数量</p>
        <p class="right">金额</p>
      </div>
      <div class="tbody" v-for="(item,index) in account ">

        <div>
          <p>{{item.productName}}</p>
          <p class="center"></p>
          <p class="right">{{item.money}}元</p>
        </div>
      </div>
      <ul class="detail offerDetail">
        <li>应付：<span class="mar40">{{deskDetails.totalmoney}}</span></li>
        <li>支付方式：<span>{{deskDetails.setType}}</span></li>
        <li>结账时间：<span> {{currentTime }}</span></li>
        <li>备注：<span>{{deskDetails.remark}}</span></li>

      </ul>
      <p class="tip">财宝管理系统</p>
    </div>

    <div class="right">
      <el-button @click="cancel" class="noprint">取消</el-button>
      <el-button type="primary" v-print='printObj' class="noprint">打印</el-button>
    </div>
  </div>
</template>

<script>
  import dialogContent from './dialogContent'

  export default {
    name: "",
    components: {dialogContent},
    data() {
      return {

        printObj: {
          deskDetails:'',//桌子信息
          currentTime:'',
          account:'',//账单信息
          id: 'printBox', // 必要，打元素的id
          popTitle: '', // 打印配置页上方标题
          extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
          preview: false, // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
          previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
          previewPrintBtnLabel: '打印', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
          zIndex: '20002', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
          previewBeforeOpenCallback() {
            console.log('正在加载预览窗口！');
          }, //预览窗口打开之前的callback（开启预览模式调用）
          previewOpenCallback() {
            console.log('已经加载完预览窗口，预览打开了！')
          }, // 预览窗口打开之后的callback（开启预览模式调用）
          beforeOpenCallback() {
            console.log('开始打印之前！')
          }, // 开启打印前的回调事件
          openCallback() {
            console.log('执行打印了！')
          }, // 调用打印之后的回调事件
          closeCallback() {
          }, //关闭打印的回调事件（无法确定点击的是确认还是取消）
          url: '',
          standard: '',
          extraCss: 'font-size: 10px,height: 20mm',
        }

      }
    },
    props:{
      detail:{}
    },
    created() {
      this.deskDetails= this.detail.deskDetails;
      this.account= this.detail.account;
      // 创建一个新的Date对象
      var currentTime = new Date();

// 获取年份（四位数）
      var year = currentTime.getFullYear().toString();

// 获取月份（两位数）
      var month = (currentTime.getMonth() + 1).toString().padStart(2, '0'); // 注意月份从0开始计算，所以需要加上1

// 获取日期（两位数）
      var day = currentTime.getDate().toString().padStart(2, '0');

// 获取小时（两位数）
      var hours = currentTime.getHours().toString().padStart(2, '0');

// 获取分钟（两位数）
      var minutes = currentTime.getMinutes().toString().padStart(2, '0');

// 获取秒数（两位数）
      var seconds = currentTime.getSeconds().toString().padStart(2, '0');

// 组合成完整的时间字符串
      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

      console.log('this.deskDetails',this.deskDetails);
      console.log('this.account',this.account);
    },

    methods: {
      cancel() {
        this.$emit('update:close', false)
      },

    }
  };
</script>

<style scoped rel="stylesheet/scss" lang="scss">

  .title,
  .tip {
    color: #CAAB62;
    font-size: 1px;
    text-align: center;
  }

  .right {
    text-align: right;
  }

  .center {
    text-align: center;
  }

  .tip {
    font-size: 1px;
    padding: 20px 0;
  }

  .detail {
    border-bottom: 1px dashed #201D1B;
    margin: 20px 0 5px;
    padding-bottom: 8px;

    li {
      color: #9C9186;
      font-size: 1px;
      line-height: 25px;

      span {
        color: #201D1B;
      }
    }

    &.offerDetail {
      border-top: 1px dashed #201D1B;
      margin-top: 5px;
      padding-top: 10px;

      .mar40 {
        margin-right: 50px;
      }
    }
  }

  .thead,
  .tbody {
    border-top: 1px dashed #201D1B;
    border-bottom: 1px dashed #201D1B;
    padding: 8px 0;
    margin-bottom: 5px;

    p {
      display: inline-block;
      color: #9C9186;
      font-size: 1px;
      width: calc(100% / 3 - 5px);
    }
  }

  .tbody p {
    color: #201D1B;
    line-height: 25px;
  }</style>
  <style >

   @media print {
           @page {
             size:  auto;
             margin:3mm;
             overflow: hidden;
             font-size: 0.01px;
           }


         }
          @media print {
                      #printBox{
                        overflow: hidden;
                        height: 290mm;
                        font-size: 0.1px;
                      }
                       .title,
                          .tip {
                              color: #CAAB62;
                              font-size: 0.01px;
                              text-align: center;
                          }

                          .right {
                              text-align: right;
                          }

                          .center {
                              text-align: center;
                          }

                          .tip {
   font-size: 0.01px;
                              padding: 10px 0;
                          }

                          .detail {
                              border-bottom: 1px dashed #201D1B;
                              margin: 5px 0;
                              padding-bottom: 2px;

                              li {
                                  color: #9C9186;
  font-size:0.01px;
                                  line-height: 10px;

                                  span {
                                      color: #201D1B;
                                  }
                              }

                              &.offerDetail {
                                  border-top: 1px dashed #201D1B;
                                  margin-top:1px;
                                  padding-top: 1px;

                                  .mar40 {
                                      margin-right: 2px;
                                  }
                              }
                          }

                          .thead,
                          .tbody {
                              border-top: 1px dashed #201D1B;
                              border-bottom: 1px dashed #201D1B;
                              padding: 2px 0;

                              margin-bottom: 1px;

                              p {
                                  display: inline-block;
                                  color: #9C9186;

                              }
                          }

                          .tbody p {
                              color: #201D1B;
                              line-height: 5px;
                               font-size: 0.01px;
                          }
                    }
  </style>
